<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <style>
        button {
            margin: 10px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
	</head>
	<body>
		  <button id="btn">隐藏</button>
    <div>
        临千仞之溪，非才长也，位高也！
    </div>

	</body>
	<script>
		  //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
        //步骤：
        //1.获取事件源和相关元素
        var button=document.getElementById("btn");
        var divtext=document.getElementsByTagName("div")[0]
        var temp=0;
        //2.绑定事件
        button.onclick=function(){
        	if(temp==0){
        		divtext.className="hide"
        		button.innerText="显示"
        		temp=1
        		return false
        		
        	}else{
        		var str=prompt("输入你要改变的文字")
        		divtext.innerText=str
        		divtext.className="show"
        		button.innerText="隐藏"
        		temp=0;
        		return false
        	}
        }
        //3.书写事件驱动程序
	</script>
</html>
